<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/roleIndex/roleIndex.css" />
    <link rel="preload" href="{{resPath}}/font/tttgbnumber.ttf" as="font">
    <link rel="preload" href="{{pluResPath}}img/roleIndex/namecard/{{bg}}.png" as="image">
    <link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
    <link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
    <link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
    <link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
    {{@headIndexStyle}}
  </head>
  <body>
    <div class="container" id="container">
      <div class="head_box">
        <div class="id_text">ID: {{uid}}</div>
        <div class="day_text">{{activeDay}}</div>
        <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
      </div>
      <div class="data_box">
        <div class="tab_lable">数据总览</div>
        {{each line val}}
        <div class="data_line">
          {{each val item}}
          <div class="data_line_item">
            <div class="num">{{item.num}}</div>
            <div class="lable">{{item.lable}}</div>
          </div>
          {{/each}}
        </div>
        {{/each}}
      </div>
      <div class="basicInfo">
          
        {{if basicInfo.level>0}}
        <div class="tab_lable">七圣召唤</div>
        <div class="basicInfo_header">
          <div class="basicInfo_icon"><span>{{basicInfo.level}}</span></div>
          <div class="basicInfo_right">
                <div class="item">
                  <div>已收集角色牌</div>
                  <div>{{basicInfo.avatar_card_num_gained}}/{{basicInfo.avatar_card_num_total}}</div>
                </div>
                <div class="item">
                  <div>已收集行动牌</div>
                  <div>{{basicInfo.action_card_num_gained}}/{{basicInfo.action_card_num_total}}</div>
                </div>
            </div>
        </div>
        <div class="basicInfo_covers"> 
          {{each frequently_win val}}
          <div><img src="{{val.image}}" alt=""> </div>
          {{/each}}</div>
      </div>
      {{/if}} 
      
      <div class="avatars_box">
        <div class="tab_lable">角色详情</div>
            <div class="plan_box">
            <table style="width:100%;border:1px;text-align: center;border-radius: 10px;" border="1">
                <tr >
                    <td> # </td>
                    <td>名称</td>
                    <td>出场数</td>
                    <td>出场率</td>
                    <td>胜率</td>
                    <td>胜局数</td>
                </tr>            
            {{each used_role val}}
                <tr>
                    <td>{{val.index}}</td>
                    <td>{{val.name}}</td>
                    <td>{{val.use_count}}</td>
                    <td>{{val.oc_rate}}%</td>
                    <td>{{val.role_win_rate}}%</td>
                    <td>{{val.proficiency}}</td>
                </tr>
            {{/each}}
            </table>
            </div>
      </div>

      <div class="avatars_box">
        <div class="tab_lable">卡牌详情</div>
        <table style="width:100%;border:1px;text-align: center;border-radius: 10px;" border="1">
            <tr>
                <td> # </td>
                <td>名称</td>
                <td>使用次数</td>
            </tr>            
        {{each used_card val}}
            <tr>
                <td>{{val.index}}</td>
                <td>{{val.name}}</td>
                <td>{{val.use_count}}</td>
            </tr>
        {{/each}}
        </table>

      </div>

      {{if msg}}
      <div class="bottom-msg">{{msg}}</div>
      {{/if}}
      <div class="logo">Yunzai-Bot X 癫癫博士</div>
    </div>
  </body>
</html>
